<template>
  <div class="mine">
    <!-- 上面的个人信息 -->
    <div class="mine_up">
      <div class="mine_info">
        <div class="mine_left">
          <!-- 名字&简介 -->
          <span class="mine_name">{{ Userlist.nickname }}</span>
          <span class="mine_introduce">{{ Userlist.intro }}</span>
        </div>
        <!-- 头像 -->
        <div class="mine_right">
          <van-image
            round
            width="100%"
            height="100%"
            :src="`http://localhost:1337${Userlist.avatar}`"
            @click="enter"
          />
        </div>
      </div>
      <!-- 累计答题 -->
      <van-row class="mine_count">
        <van-col span="6" v-if="Userlist.submitNum"
          ><span class="mine_shuliang">{{ Userlist.submitNum }}</span
          ><span class="mine_dati">累计答题</span></van-col
        >
        <van-col span="6" v-if="Userlist.collectQuestions"
          ><span class="mine_shuliang">{{
            Userlist.collectQuestions.length
          }}</span
          ><span class="mine_dati">收藏题目</span></van-col
        >
        <van-col span="6" v-if="Userlist.errorNum"
          ><span class="mine_shuliang">{{ Userlist.errorNum }}</span
          ><span class="mine_dati">我的错题</span></van-col
        >
        <van-col span="6"
          ><span class="mine_shuliang">{{ accuracy }}%</span
          ><span class="mine_dati">正确率</span></van-col
        >
      </van-row>
    </div>

    <div class="mine_below">
      <van-cell-group inset class="mine_post">
        <van-cell
          title="我的岗位"
          :value="mypost"
          is-link
          icon="manager-o"
          @click="mypostshow"
        />
      </van-cell-group>
      <van-cell-group inset class="mine_face">
        <van-cell>
          <template #title>
            <h4>面经数据</h4>
            <van-row v-if="Userlist.shareData">
              <van-col span="8"
                ><span class="mine_zuori">昨日阅读</span
                ><em class="mine_sum"
                  >+{{ Userlist.shareData.read.yesterday }}</em
                ><br />
                <h5>{{ Userlist.shareData.read.total }}</h5>
                <span class="mine_zongshu">阅读总数</span></van-col
              >
              <van-col span="8"
                ><span class="mine_zuori">昨日获赞</span
                ><em class="mine_sum"
                  >+{{ Userlist.shareData.star.yesterday }}</em
                ><br />
                <h5>{{ Userlist.shareData.star.total }}</h5>
                <span class="mine_zongshu">获赞总数</span></van-col
              >
              <van-col span="8"
                ><span class="mine_zuori">昨日新增</span
                ><em class="mine_sum"
                  >+{{ Userlist.shareData.comment.yesterday }}</em
                ><br />
                <h5>{{ Userlist.shareData.comment.total }}</h5>
                <span class="mine_zongshu">评论总数</span></van-col
              >
            </van-row>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="mine_my">
        <van-cell title="我的面经分享" value="21" is-link icon="like-o" />
        <van-cell title="我的消息" value="21" is-link icon="like-o" />
        <van-cell title="收藏的题库" value="21" is-link icon="like-o" />
        <van-cell title="收藏的企业" value="21" is-link icon="like-o" />
        <van-cell title="我的错题" value="21" is-link icon="like-o" />
        <van-cell title="收藏的面试经验" value="21" is-link icon="like-o" />
      </van-cell-group>
    </div>
    <!-- 我的岗位 -->
    <van-dialog
      v-model="postshow"
      title="个人岗位"
      show-cancel-button
      autofocus
      @confirm="updatepost"
    >
      <van-search
        v-model="mypost"
        placeholder="请输入您的岗位"
        left-icon="setting-o"
      />
    </van-dialog>
  </div>
</template>

<script>
import { getUserinfo, setUserinfo } from '@/api/mine.js'
import { mapState } from 'vuex'
export default {
  name: 'mine',
  data () {
    return {
      mypost: '', //岗位
      postshow: false // 岗位弹出
    }
  },
  computed: {
    ...mapState(['Userlist']),
    accuracy: function () {
      return (
        Math.round(
          ((this.Userlist.submitNum - this.Userlist.errorNum) /
            this.Userlist.submitNum) *
            10000
        ) / 100.0
      )
    }
  },
  methods: {
    // 打开岗位
    mypostshow () {
      this.postshow = true
      this.mypost = this.Userlist.position
    },
    // 保存岗位
    async updatepost () {
      await setUserinfo({ position: this.mypost })
      this.$store.commit('setUserlist', {
        ...this.Userlist,
        position: this.mypost
      })
      this.$toast({
        message: '更新成功',
        forbidClick: true,
        duration: 500
      })
    },
    // 点击头像跳转编辑页
    enter () {
      this.$router.push('/compile')
    },
    // 刷新页面
    async getUser () {
      const res = await getUserinfo()
      // console.log(res)
      // this.Userlist = res.data.data
      this.$store.commit('setUserlist', res.data.data)
      this.mypost = this.Userlist.position
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f7f4f5;
  .mine {
    line-height: 1.15;
    .mine_up {
      height: 186px;
      background: linear-gradient(45deg, #ce0031, #b8002c);
      padding: 15px;
      .mine_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 59px;
        width: 345px;
        margin-top: 15px;
        .mine_left {
          // display: flex;
          width: 150px;
          height: 45px;
          .mine_name {
            display: block;
            font-size: 18px;
            font-weight: 400;
            color: #fff;
          }
          .mine_introduce {
            font-size: 12px;
            color: #fff;
            opacity: 0.7;
            // margin-top: 10px;
          }
        }
        .mine_right {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          border: 0.08rem solid rgba(255, 255, 255, 0.38);
        }
      }
      .mine_count {
        margin-top: 35px;
        .van-col {
          display: flex;
          flex-direction: column;
          align-items: center;
          .mine_shuliang {
            font-size: 21px;
            color: #fff;
          }
          .mine_dati {
            margin-top: 8px;
            font-size: 12px;
            color: #fff;
            opacity: 0.7;
          }
        }
      }
    }
    .mine_below {
      margin-top: -30px;
      .mine_post {
        margin-bottom: 10px;
        .van-icon-manager-o {
          font-size: 14px;
          margin-right: 10px;
        }
      }
      .mine_face {
        margin-bottom: 10px;
        .van-cell {
          padding: 0;
          h4 {
            padding: 15px;
          }
          .van-col {
            text-align: center;
            margin-bottom: 17px;
            .mine_zuori {
              font-size: 12px;
              color: #b4b4bd;
            }
            .mine_sum {
              color: #8bdeea;
              font-style: normal;
            }
            h5 {
              font-size: 21px;
              font-weight: 400;
            }
            .mine_zongshu {
              font-size: 12px;
            }
          }
        }
      }
      .mine_my {
        margin: 0 15px 25px;
      }
    }
  }
}
</style>
